<template>
  <div>
    <div>
      <h1>{{ data.name }}</h1>
      <div>
        <div class="child">测试less</div>
        <span class="iconfont icon-arrow-double-left" />
        <span class="iconfont icon-arrow-double-right" />
        <span class="iconfont icon-attachment" />
        <span class="iconfont icon-close" />
        <span class="iconfont icon-chart-pie" />
        <span class="iconfont icon-direction-down" />
        <div class="nav">
          <div class="slide" />
          <!-- <img class="image" src="@/assets/image/animal.jpg" alt=""> -->
          <img class="image" :src="animal" alt="" />
          <div class="backImage" />
        </div>
      </div>
    </div>
    <h3>动态导入js,实现性能优化。点击按钮加载js</h3>
    <pre>
      原理在于import导入是动态的，打包的时候会单独创建引入的js文件，只有在触发时才加载。</pre
    >
    <button id="btn" @click="webpackChunkName">点击动态导入js</button>
  </div>
</template>
<script setup lang="ts">
import animal from '@/assets/image/animal.jpg' //import引入图片资源时，需要在ts声明文件中declare一下
import { calc } from '@/common/utils'
import { reactive } from 'vue'
const data = reactive({
  name: 'qiq'
})

interface People {
  name: string
  age: number
  hobby: Array<string>
}
let people: People = { name: '奇奇', age: 22, hobby: ['睡觉', '打游戏'] }
let age = 18
let aeg2 = 12
console.log('age:', age)
console.log('calc:', calc(age, aeg2))
console.log('People:', people)

const noNameFun = () => {
  console.log('hello 箭头函数')
}
noNameFun()
// 动态导入(按需加载js)。只有在按钮点击的时候才加载js
function webpackChunkName() {
  // webpack魔法命名,会生成同名js文件
  import(/* webpackChunkName:"calcFun" */ './test').then(({ calcFun }) => {
    const sum = calcFun(1, 2, 3)
    console.log('动态导入:', sum)
  })
}
</script>
<style scoped lang="less">
.nav {
  background: red;
  > .slide {
    height: 40px;
    background: cyan;
  }
  > .image {
    width: 200px;
    height: 200px;
  }
  > .backImage {
    width: 200px;
    height: 150px;
    background-image: url('@/assets/image/cike.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }
}
</style>
